import { Result } from '@renderer/components/Result'
import { Search } from '@renderer/components/Search'
import {
  useBookmark,
  useDragWindow,
  useIgnoreMouseEvents,
  useShortcutKey,
} from '@renderer/hooks'
import { useSettingStore } from '@renderer/stores'

export function Home (): JSX.Element {
  const shortcutKey = useSettingStore(s => s.shortcutKey)
  const managerShortcutKey = useSettingStore(s => s.managerShortcutKey)
  const [handleMouseEnter] = useIgnoreMouseEvents()
  const { register } = useShortcutKey()
  const { startDragWindow } = useDragWindow('search')
  useBookmark()

  register('search', shortcutKey)
  register('manager', managerShortcutKey)
  
  return (
    <main
      onMouseOver={handleMouseEnter}
      onMouseDown={startDragWindow}
    >
      <Search />
      <Result />
    </main>
  )
}
